<template>
  <div class="rainbow-flow-bg">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  const colors = [
    'rgba(255, 0, 128, 0.6)',
    'rgba(128, 0, 255, 0.6)',
    'rgba(0, 128, 255, 0.6)',
    'rgba(0, 255, 128, 0.6)',
    'rgba(255, 255, 0, 0.6)',
    'rgba(255, 128, 0, 0.6)'
  ]

  class Particle {
    constructor() {
      this.x = Math.random() * canvas.width
      this.y = Math.random() * canvas.height
      this.vx = (Math.random() - 0.5) * 2
      this.vy = (Math.random() - 0.5) * 2
      this.size = Math.random() * 100 + 50
      this.color = colors[Math.floor(Math.random() * colors.length)]
    }

    update() {
      this.x += this.vx
      this.y += this.vy

      if (this.x < -this.size) this.x = canvas.width + this.size
      if (this.x > canvas.width + this.size) this.x = -this.size
      if (this.y < -this.size) this.y = canvas.height + this.size
      if (this.y > canvas.height + this.size) this.y = -this.size
    }

    draw() {
      const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size)
      gradient.addColorStop(0, this.color)
      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
      
      ctx.fillStyle = gradient
      ctx.fillRect(this.x - this.size, this.y - this.size, this.size * 2, this.size * 2)
    }
  }

  const particles = Array.from({ length: 8 }, () => new Particle())

  const animate = () => {
    ctx.fillStyle = 'rgba(10, 10, 30, 0.1)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    particles.forEach(particle => {
      particle.update()
      particle.draw()
    })

    animationId = requestAnimationFrame(animate)
  }

  animate()

  const handleResize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
  })
})
</script>

<style scoped>
.rainbow-flow-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a1e 0%, #1a1a3e 100%);
}

canvas {
  display: block;
  filter: blur(30px);
}
</style>

